/*
 * @Author: Jiraiya
 * @Date: 2020-05-07 18:33:45
 * @LastEditors: Jiraiya
 * @LastEditTime: 2020-05-08 12:15:07
 * @Description: 
 */
import React, { useState } from 'react';
import axios from 'axios';
import Compare from '../components/Compare'
import { Form, Input, Button, Radio } from 'antd';
import { List } from 'antd/lib/form/Form';

const MyForm = () => {
    const [form] = Form.useForm();
    const [code, setCode] = useState();
    const [list, setList] = useState([]);
    const onFinish = () => {
        axios.post('/api', {code}).then(({data, status}) => {
            if(status === 200){
                console.log(data)
                setList(data);
            }else{
                return Promise.reject('发生错误')
            }
           
        }).catch(err => {
            console.log(err)
        })
    };
  
    const formItemLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
    }
  
    const buttonItemLayout ={
        wrapperCol: { span: 14, offset: 10 },
    }
  
    return (
      <div>
        {
            list.map((item, idx) => {
                return <Compare item={item} key={idx}/>
            })
        }
        <Form
          {...formItemLayout}
          layout='horizontal'
          form={form}
          initialValues={{ layout: 'horizontal' }}
          onFinish={onFinish}
        >
          <Form.Item label="基金编号">
            <Input placeholder="请输入基金代号，多个用英文逗号分隔" name='code' value={code} onChange={(e)=>{setCode(e.target.value)}}/>
          </Form.Item>
          <Form.Item {...buttonItemLayout}>
            <Button type="primary" htmlType="submit">查看</Button>
          </Form.Item>
        </Form>
      </div>
    );
  };

export default MyForm;